<template lang="html">
  <div class="global">
    <div class="header">
      <div class="title">{{district_name}}</div>
      <span class="date">{{date[0]}}年{{date[1]}}月</span>
      <span class="amount">￥{{amount}}</span>
      <span class="text">应缴纳金额</span>
      <span class="tip">* 最晚支付日前没有支付账单，将会产生滞纳金</span>
      <ZanTab v-bind="tab1" :componentId="'tab1'" :handleZanTabChange="handleZanTabChange"/>
    </div>
    <div class="g-content">
      <div class="content" v-show="currentTab == 0" v-for="(item, index) in billList" :key="index">
        <div class="section-wrap" v-show="item.bstatus == '1' && (item.btype != '2' || item.btype != '5')">
          <div class="section">
            <div class="left">
              <div class="default" :class="{ 'light' : item.isLight }" @click="choose(item)"></div>
              <div class="text">
                <span class="top" v-show="item.btype == '1'">房租账单</span>
                <span class="top" v-show="item.btype == '3'">其他账单</span>
                <span class="top" v-show="item.btype == '4'">自定义房租账单</span>
                <span class="top" v-show="item.btype == '6'">首期房租账单</span>
                <span class="mid">{{item.start_date}}至{{item.end_date}}</span>
                <span class="bottom">最晚支付日：{{item.deadline_date}}</span>
              </div>
            </div>
            <div class="right">
              <span>￥{{item.amount}}</span>
              <!-- <image src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180608/2018060802543556098.jpg"></image> -->
            </div>
          </div>
          <div class="rent-hide" v-show="item.btype != '2' || item.btype != '5'">
            <div class="rent-hide-section clearfix">
              <div class="fee">租金：{{item.fee_rent}}</div>
              <div class="fee" v-show="item.btype == '6'">押金：{{item.fee_deposit}}</div>
              <div class="fee" v-for="(item2, index2) in item.fee_other" :key="index2">{{item2.fee_name}}：{{item2.fee}}</div>
            </div>
          </div>
        </div>
        <div class="section-wrap" v-if="item.bstatus == '1' && (item.btype == '2' || item.btype == '5') ">
          <div class="section">
            <div class="left">
              <div class="default" :class="{ 'light' : item.isLight }" @click="choose(item)"></div>
              <div class="text">
                <span class="top" v-show="item.btype == '2'">水电费账单</span>
                <span class="top" v-show="item.btype == '5'">自定义水电费账单</span>
                <span class="mid">{{item.start_date}}至{{item.end_date}}</span>
                <span class="bottom">最晚支付日：{{item.deadline_date}}</span>
              </div>
            </div>
            <div class="right">
              <span>￥{{item.amount}}</span>
              <image src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180608/2018060802543556098.jpg"></image>
            </div>
          </div>
          <div class="utility-hide">
            <div class="utility-content">
              <div class="top">
                <span class="left">水费 (7.0元/吨)</span>
                <span class="right">{{item.fee_water}}</span>
              </div>
              <div class="main">
                <div class="utility-section">
                  <span class="left">开始计算日期</span>
                  <span class="right">{{item.fee_water_info.fee_water_start_date}}</span>
                </div>
                <div class="utility-section">
                  <span class="left">结束计算日期</span>
                  <span class="right">{{item.fee_water_info.fee_water_end_date}}</span>
                </div>
                <div class="utility-section">
                  <span class="left">初始读数</span>
                  <span class="right">{{item.fee_water_info.fee_water_start}}</span>
                </div>
                <div class="utility-section">
                  <span class="left">结束读数</span>
                  <span class="right">{{item.fee_water_info.fee_water_end}}</span>
                </div>
                <div class="utility-section">
                  <span class="left">用量</span>
                  <span class="right"></span>
                </div>
                <div class="utility-section">
                  <span class="left">倍率</span>
                  <span class="right">{{item.fee_water_info.beilv}}</span>
                </div>
              </div>
            </div>
            <div class="utility-content">
              <div class="top">
                <span class="left">电费 (7.0元/吨)</span>
                <span class="right">{{item.fee_electricity}}</span>
              </div>
              <div class="main">
                <div class="utility-section">
                  <span class="left">开始计算日期</span>
                  <span class="right">{{item.fee_electricity_info.fee_electricity_start_date}}</span>
                </div>
                <div class="utility-section">
                  <span class="left">结束计算日期</span>
                  <span class="right">{{item.fee_electricity_info.fee_electricity_end_date}}</span>
                </div>
                <div class="utility-section">
                  <span class="left">初始读数</span>
                  <span class="right">{{item.fee_electricity_info.fee_electricity_start}}</span>
                </div>
                <div class="utility-section">
                  <span class="left">结束读数</span>
                  <span class="right">{{item.fee_electricity_info.fee_electricity_end}}</span>
                </div>
                <div class="utility-section">
                  <span class="left">用量</span>
                  <span class="right"></span>
                </div>
                <div class="utility-section">
                  <span class="left">倍率</span>
                  <span class="right">{{item.fee_electricity_info.beilv}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="static" :class="{'lightAll' : isAll}" @click="chooseAll"></div>
          <span class="all-text">全选</span>
          <span class="choose-text">已选择{{chooseNum}}条账单</span>
          <!-- <div class="pay-btn" @click="toPay">支付</div> -->
          <button class="pay-btn" open-type="getUserInfo" @getuserinfo="getUserInfo">支付</button>
        </div>
      </div>
      <div class="content" v-show="currentTab == '1'" v-for="(item, index) in billList" :key="index">
        <div class="section-wrap" v-if="item.bstatus == '2' && (item.btype !== '2' || item.btype !== '5')">
          <div class="section">
            <div class="left">
              <div class="text">
                <span class="top" v-show="item.btype == '1'">房租账单</span>
                <span class="top" v-show="item.btype == '3'">其他账单</span>
                <span class="top" v-show="item.btype == '4'">自定义房租账单</span>
                <span class="top" v-show="item.btype == '6'">首期房租账单</span>
                <span class="top" v-show="item.btype == '8'">手动退租账单</span>
                <span class="mid">{{item.start_date}}至{{item.end_date}}</span>
              </div>
            </div>
            <div class="right">
              <span>￥{{item.amount}}</span>
            </div>
          </div>
          <div class="rent-hide clearfix" v-if="item.btype !== '2' || item.btype !== '5'">
            <div class="fee">租金：{{item.fee_rent}}</div>
            <div class="fee" v-if="item.btype == '6'">押金：{{item.fee_deposit}}</div>
            <div class="fee" v-for="(item2, index2) in item.fee_other" :key="index2">{{item2.fee_name}}：{{item2.fee}}</div>
          </div>
        </div>
        <div class="section-wrap" v-if="item.bstatus == '2' && item.btype == '2'">
          <div class="section">
            <div class="left">
              <div class="text">
                <span class="top" v-show="item.btype == '2'">水电费账单</span>
                <span class="mid">{{item.start_date}}至{{item.end_date}}</span>
              </div>
            </div>
            <div class="right">
              <span>￥{{item.amount}}</span>
            </div>
          </div>
          <div class="utility-hide">
            <div class="utility-content">
              <div class="top">
                <span class="left">水费 (7.0元/吨)</span>
                <span class="right">{{item.fee_water}}</span>
              </div>
              <div class="main">
                <div class="utility-section">
                  <span class="left">开始计算日期</span>
                  <span class="right">{{item.fee_water_info.fee_water_start_date}}</span>
                </div>
                <div class="utility-section">
                  <span class="left">结束计算日期</span>
                  <span class="right">{{item.fee_water_info.fee_water_end_date}}</span>
                </div>
                <div class="utility-section">
                  <span class="left">初始读数</span>
                  <span class="right">{{item.fee_water_info.fee_water_start}}</span>
                </div>
                <div class="utility-section">
                  <span class="left">结束读数</span>
                  <span class="right">{{item.fee_water_info.fee_water_end}}</span>
                </div>
                <div class="utility-section">
                  <span class="left">用量</span>
                  <span class="right"></span>
                </div>
                <div class="utility-section">
                  <span class="left">倍率</span>
                  <span class="right">{{item.fee_water_info.beilv}}</span>
                </div>
              </div>
            </div>
            <div class="utility-content">
              <div class="top">
                <span class="left">电费 (7.0元/吨)</span>
                <span class="right">{{item.fee_electricity}}</span>
              </div>
              <div class="main">
                <div class="utility-section">
                  <span class="left">开始计算日期</span>
                  <span class="right">{{item.fee_electricity_info.fee_electricity_start_date}}</span>
                </div>
                <div class="utility-section">
                  <span class="left">结束计算日期</span>
                  <span class="right">{{item.fee_electricity_info.fee_electricity_end_date}}</span>
                </div>
                <div class="utility-section">
                  <span class="left">初始读数</span>
                  <span class="right">{{item.fee_electricity_info.fee_electricity_start}}</span>
                </div>
                <div class="utility-section">
                  <span class="left">结束读数</span>
                  <span class="right">{{item.fee_electricity_info.fee_electricity_end}}</span>
                </div>
                <div class="utility-section">
                  <span class="left">用量</span>
                  <span class="right"></span>
                </div>
                <div class="utility-section">
                  <span class="left">倍率</span>
                  <span class="right">{{item.fee_electricity_info.beilv}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import store from '@/store/store'
import ZanTab from 'mpvue-zanui/src/components/zan/tab'
export default {
  components: {
    ZanTab
  },
  data () {
    return {
      currentTab: 0,
      billList: [],
      district_name: '',
      amount: 0,
      payAmount: 0,
      chooseNum: 0,
      chooseBids: '',
      isAll: false,
      bind: false,
      tab1: {
        list: [
          { id: 0, title: '待支付' },
          { id: 1, title: '已支付' }
        ],
        scroll: false,
        selectedId: 0
      }
    }
  },
  computed: {
    date () {
      return store.state.date
    },
    bids () {
      return store.state.bids
    }
  },
  onLoad () {
    try {
      var value = wx.getStorageSync('openid')
      if (value) {
        console.log(value)
        this.bind = true
      }
    } catch (e) {
      this.bind = false
      console.log('获取openid失败')
    }
  },
  onShow () {
    this.chooseBids = ''
    for (var i = 0; i < this.billList.length; i++) {
      this.billList[i].isLight = false
    }
    this.isAll = false
    this.chooseNum = 0
    this.payAmount = 0
    var districtId = this.$root.$mp.query.districtId
    var roomId = this.$root.$mp.query.roomId
    this.opbilldetail(districtId, roomId, this.bids)
  },
  methods: {
    ...ZanTab.methods,
    handleZanTabChange (e) {
      const {componentId, selectedId} = e
      this[componentId].selectedId = selectedId
      if (selectedId === 0) {
        this.currentTab = 0
      } else {
        this.currentTab = 1
      }
    },
    toPay () {
      if (this.payAmount > 0 && this.amount !== 0) {
        this.chooseBids = this.chooseBids.substring(0, this.chooseBids.length - 1)
        console.log(this.chooseBids)
        store.commit('setBids', this.chooseBids)
        this.payAmount = parseFloat(this.payAmount).toFixed(2)
        this.$router.push({ path: '/pages/bill/bill_pay/main', query: { payAmount: this.payAmount } })
      } else {
        wx.showToast({
          title: '请选择账单',
          icon: 'none'
        })
      }
    },
    choose (item) {
      item.isLight = !item.isLight
      this.chooseBids += item.bid + ','
      if (item.isLight) {
        this.payAmount += parseFloat(item.amount)
        this.chooseNum++
      } else {
        this.payAmount -= parseFloat(item.amount)
        this.chooseNum--
      }
      if (this.chooseNum === this.billList.length) {
        this.isAll = true
      } else {
        this.isAll = false
      }
    },
    chooseAll () {
      this.isAll = !this.isAll
      this.chooseBids = this.bids + ''
      this.chooseNum = 0
      this.payAmount = 0
      if (this.isAll) {
        for (var i = 0; i < this.billList.length; i++) {
          if (this.billList[i].bstatus === '1') {
            this.billList[i].isLight = true
            this.payAmount = parseFloat(this.amount)
            this.chooseNum++
          }
        }
      } else {
        for (var j = 0; j < this.billList.length; j++) {
          if (this.billList[j].bstatus === '1') {
            this.billList[j].isLight = false
            this.chooseNum = 0
          }
        }
      }
    },
    opbilldetail (districtId, roomId, bids) {
      let that = this
      let param = {}
      param['district_id'] = districtId
      param['room_id'] = roomId
      param['bids'] = bids
      const opbilldetail = api.opbilldetail(param)
      opbilldetail.then(d => {
        if (d.code === 200) {
          that.billList = d.data
          that.district_name = that.billList[0].district_name
          that.amount = 0
          for (var i = 0; i < that.billList.length; i++) {
            if (that.billList[i].bstatus === '1') {
              that.amount += parseFloat(parseFloat(that.billList[i].amount) + parseFloat(that.billList[i].overdue_fee_now))
            }
            that.billList[i]['isLight'] = false
          }
          that.amount = parseFloat(that.amount).toFixed(2)
        }
      })
      .catch((e) => {
        console.log(e)
      })
    },
    // 绑定微信
    getUserInfo (e) {
      if (this.bind) {
        this.toPay()
      } else {
        this.loginWechat(e)
      }
    },
    // 登录微信,获取code
    loginWechat (e) {
      let that = this
      wx.login({
        success: function (res) {
          if (res.code) {
            console.log(res.code)
            that.opbindwechat(res.code, e)
          } else {
            console.log('登录失败！' + res.errMsg)
          }
        }
      })
    },
    // 获取openid和session_key
    opbindwechat (code, e) {
      var param = {}
      param['code'] = code
      param['type'] = 2
      param['xcx_no'] = 22
      const opbindwechat = api.opbindwechat(param)
      opbindwechat.then(d => {
        if (d.code === 200) {
          try {
            wx.setStorageSync('openid', d.data.openid)
          } catch (e) {
          }
          this.opgetuserinfo(e.mp.detail.userInfo, d.data.openid)
        } else {
          console.log('获取失败')
        }
      })
      .catch((e) => {
        console.log(e)
      })
    },
    // 后台存入userInfo和 openid
    opgetuserinfo (userInfo, openid) {
      userInfo['openid'] = openid
      var param = userInfo
      console.log(userInfo)
      const opgetuserinfo = api.opgetuserinfo(param)
      opgetuserinfo.then(d => {
        if (d.code === 200) {
          this.bind = true
          this.toPay()
        } else if (d.code === 4313) {
          this.bind = false
          this.toPay()
        }
      })
      .catch((e) => {
        console.log(e)
      })
    }
  }
}
</script>

<style lang="css">
  @import "./bill_detail.css";
</style>
